<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>汽车沿着路径运动</title>
</head>
<body>
<canvas id="carCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
<svg width="0" height="0">
  <path id="carPath" d="M10 80 Q 95 10 180 80 T 330 80" stroke="red" fill="red"></path>
</svg>
<script>
    window.onload = function() {
  var canvas = document.getElementById('carCanvas');
  var ctx = canvas.getContext('2d');
  var path = document.getElementById('carPath');
  var length = path.getTotalLength();
  
  // 设置汽车的大小
  var carWidth = 20;
  var carHeight = 10;

  // 汽车的初始位置
  var position = 0;

//   function drawCar() {
//     // 清除画布
//     ctx.clearRect(0, 0, canvas.width, canvas.height);
    
//     // 计算汽车在路径上的位置
//     var point = path.getPointAtLength(position);
    
//     // 绘制汽车（一个简单的方块）
//     ctx.fillStyle = 'blue'; // 汽车的颜色
//     ctx.fillRect(point.x - carWidth / 2, point.y - carHeight / 2, carWidth, carHeight);
    
//     // 更新位置
//     position += 1; // 每帧移动的距离
//     if (position > length) {
//       position = 0; // 到达路径末端后重新开始
//     }
//   }
function drawCar() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算汽车在路径上的位置
  var point = path.getPointAtLength(position);
  
  // 获取当前位置的切线角度
  var angle = path.getPointAtLength(position - 1).x - point.x,
            angleY = path.getPointAtLength(position - 1).y - point.y;
  var angleRadians = Math.atan2(angleY, angle);
  var angleDegrees = angleRadians * (180 / Math.PI);

  // 保存当前绘图状态
  ctx.save();

  // 移动原点到汽车中心位置
  ctx.translate(point.x, point.y);

  // 旋转画布以对准路径方向
  ctx.rotate(angleRadians);

  // 绘制汽车（一个简单的方块）
  ctx.fillStyle = 'blue'; // 汽车的颜色
  ctx.fillRect(-carWidth / 2, -carHeight / 2, carWidth, carHeight);

  // 恢复绘图状态
  ctx.restore();

  // 更新位置
  position += 1; // 每帧移动的距离
  if (position > length) {
    position = 0; // 到达路径末端后重新开始
  }
}


  // 使用 requestAnimationFrame 来循环绘制汽车
  function animate() {
    drawCar();
    requestAnimationFrame(animate);
  }

  // 开始动画
  animate();
};

</script>
</body>
</html>
